<template>
    <div class="getQa" >
      <div
        class="getQa-item"
        v-if="replyInfoDeal.length !== 0 && getQaListStatus === 2"
        v-for="(item, index) in replyInfoDeal"
        :key="`getQa-item-${index}`"
      >

        <div
          class="getQa-item-info"
        >

          <div
            class="getQa-item-info-title ell"
            :title="item.title"
          >
            {{item.title}}
          </div>

          <div
            class="getQa-item-info-qa"
          >
            <div class="getQa-item-info-qa-name">
              问题：
            </div>
            <div
              :class="{'getQa-item-info-qa-content': true, 'ell': (ellClass!==index)}"
              v-html="( item.question )"
            >
              <!-- {{item.question}} -->
            </div>

          </div>

          <div
            v-if="item.replyList.length !==0"
            v-for="(replyItem, replyIndex) in item.replyList"
            class="getQa-item-info-reply"
            :key="`getQa-item-${index}-reply-${replyIndex}`"
          >
            <div class="getQa-item-info-reply-name">
              回复：
            </div>
            <div
              :class="{'getQa-item-info-reply-content': true, 'ell': (ellClass!==index)}"
              v-html="( replyItem )"
            >
              <!-- {{replyItem}} -->
            </div>
          </div>

          <div
              v-if="item.replyList.length === 0"
              class="getQa-item-info-reply"
            >
              <div class="getQa-item-info-reply-name">
                回复：
              </div>
              <div
                :class="{'getQa-item-info-reply-content': true, 'ell': (ellClass!==index)}"
              >
              </div>

          </div>

        </div>

        <div
          class="getQa-item-del"
          @click="qaDel(index, item.id)"
        >
          <vi-icon type="delete" class="iconPrimary" style="fontSize: 20px;" ></vi-icon>
          <div class="getQa-item-del-name">删除</div>
        </div>

        <div
          class="getQa-item-icon"
          @click="qaShow(index, item.id)"
        >
          <vi-icon :type="`${ellClass!==index?'down':'up'}`" style="fontSize: 14px; color: #333;"></vi-icon>
        </div>

      </div>

      <div
        v-if="replyInfoDeal.length === 0 && getQaListStatus === 2"
        class="getQa-none"
      >
        暂无数据
      </div>

      <div
        v-show="getQaListStatus !== 2"
        class="getQa-status"
      >
        <status
          class="status"
          label="正在加载..."
        />
      </div>

    </div>
</template>

<script>
import activeShowMixin from "../../mixin/activeShow.mixin";
import _ from 'lodash';

import status from "../public/status";

  export default {
    name: "postQa",
    components: { status, },
    mixins: [activeShowMixin],
    data() {
        return{
          replyInfo: [
            // {
            //   id: '0000000000',
            //   title: '标题0000000000',
            //   question: '问题00000000000000000000000000000000000000000000000000000000000000000000000000000000',
            //   reply: ['回答00000000000000000000000000000000000000000000000000000000000000000000000000000000', '回答1' ],
            // },
          ], // 回复信息
          ellClass: null,
          getQaListStatus: 0, // 0 默认状态 1接口在请求 2接口请求完成
        }
    },
    created(){
      this.getQaList();
    },
    mounted() {
    },
    methods: {
      // 回答展开
      qaShow(index){
        this.ellClass = (index===this.ellClass?null:index);
      },
      // 问题删除
      qaDel(index, id){
        // console.log('qaDel', index, id);
        this.$message.loading(`正在删除回复...`);
        this.$http(this.$url.DeleteFeedBack, { id: id }, false )
        .then(result => {
            // console.log(result,);
            this.getQaList();
            if(result.state.ok === 1){
                this.$message.success("回复删除成功！");
            }
            else{
                this.$message.warning("回复删除失败！");
            }
        })
        .catch(error => {
        })
        .finally(() => {
        });
      },
      getQaList(){
        this.getQaListStatus = 1;
        this.$http(this.$url.FeedBacksInfo, {userId: this.userId } )
        .then(result => {
          this.getQaListStatus = 2;
            if(result.state.ok === 1 && result.body){
                this.replyInfo = JSON.parse(result.body).replyInfo||[];
                console.log( this.replyInfo );
            }
            else{
                this.replyInfo = [];
            }
        })
        .catch(error => {
        })
        .finally(() => {
        });
      },
    },
    computed: {
      userId() {
        return this.$store.state.user.userId;
      },
      replyInfoDeal(){
        let array = _.cloneDeep(this.replyInfo);
        if(array.length > 0){
          array.map( (v,i)=>{
            v.question = v.question.replace(/\n/g,"<br/>");
            if( v.replyList.length > 0 ){
              v.replyList[0] = v.replyList[0].replace(/\n/g,"<br/>");
            }
          } )
          return array;
        }
        else{
          return array;
        }
      },
    }
  };
</script>

<style lang="less" scoped>
.getQa{
    width: 100%;
    // min-height: 440px;
    height: 500px;
    overflow: auto;
    background-color: #f0f3f5;

    .getQa-item{
      margin: 15px;
      padding: 10px 10px 20px 10px;
      background-color: #fff;
      display: flex;
      position: relative;

      .getQa-item-info{
        width: calc( 100% - 60px );
        border-right: 1px solid #dcdcdc;
        padding: 0 15px 0 0;
        .getQa-item-info-title{
          font-size: 16px;
          color: #666;
        }
        .getQa-item-info-qa{
          display: flex;
          margin: 0 0 6px 0;
          .getQa-item-info-qa-name{
            width: 45px;
          }
          .getQa-item-info-qa-content{
            width: calc( 100% - 45px );
            word-wrap:break-word;
          }
        }
        .getQa-item-info-reply{
          display: flex;
          .getQa-item-info-reply-name{
            color: @primary;
            width: 45px;
          }
          .getQa-item-info-reply-content{
            color: @primary;
            width: calc( 100% - 45px );
            word-wrap:break-word;
          }
        }
      }

      .getQa-item-del{
        width: 30px;
        height: 40px;
        position: absolute;
        right: 20px;
        top: calc(50% - 20px);
        text-align: center;
        cursor: pointer;
        .getQa-item-del-name{
          color: @primary;
          font-size: 12px;
        }
        .iconPrimary{
          color: @primary;
        }
      }

      .getQa-item-icon{
        position: absolute;
        bottom: 0px;
        left: calc( 50% - 15px );
        cursor: pointer;
        width: 30px;
        height: 20px;
        text-align: center;
      }

    }

    .ell {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 21px;
    }

    .getQa-none{
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 18px;
      text-align: center;
      font-weight: 600;
      color: #666;
    }

    .getQa-status{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
    }
    .getQa-status :first-child div
    {
      align-self:center;
    }
}
</style>
